<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/prewimg.css">
		<link rel="stylesheet" href="../css/dongwall.css">
		<style type="text/css">

		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class=" mui-segmented-control-inverted">	
				<div id="menu-div">
                    <a id="menu-div-item1" class="mui-control-item mui-active" href="#item1mobile">
			    		校友
			    	</a>
			    	<div id="" style="border-left: 1px solid #E5E5E5;width: 0.5%;background-color: #E5E5E5;border-radius: 1px"></div>
			    	<a id="menu-div-item2" style="background-color: #FFFFFF;color: #3B559F;" class="mui-control-item" href="#item2mobile">
			    		<spgan>校园墙</span>
			    	</a>
			    	<a id="menu-div-item3"  class="mui-control-item" href="#item3mobile">
			    		<span>好友墙</span>
			    	</a>
			    	<div id="" style="border-left: 1px solid #E5E5E5;width: 0.5%;background-color: #E5E5E5;border-radius: 1px;"></div>
			    	<a id="menu-div-item4" class="mui-control-item" href="#item4mobile">
			    		切换
			    	</a>
		        </div>
		        </div>
		        
		        
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第1个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第1个选项卡子项-2
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第2个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-2
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第3个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-2
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									
									<li>
							      	<div class="mui-card mui-card1">
					                <div class="mui-card-header mui-card-media cardtop">
									    <img src="../images/11298122748b742d0co.jpg" style="width: 35px;height: 35px;" />
									    <div class="mui-media-body">
										         小M
										<p>发表于 2016-06-30 15:30</p>
										
									    </div>
								    </div>
								    <div id="" class="write-div">
											  还会那就看你空间你那颗纽扣您可能看你那u基本就u刚1iu和uih11宝贝u极版就好比好吧就吧吧吧极版
										</div>
									<div class="mui-card-content" style="margin: 1% 0">
										<div id="imgcontent" class="imgcontent">
											<img src="../images/11298122748b742d0co.jpg" data-preview-src="" data-preview-group="2" id="imga"/>
											<img src="../images/11298122748b742d0co.jpg" data-preview-src="" data-preview-group="2" id="imga"/>
											
										</div>
									</div>
									<div class="mui-card-footer" >
										<div id="aaaa"><div class="iconimg1" ><img src="../images/xin.png"/></div>喜欢</div>
										<div id="aaaa"><div class="iconimg2" ><img src="../images/chat.png"/></div>评论</div>
										<div id="aaaa" ><div class="iconimg2"><img src="../images/add.png"/></div>关注</div>
									</div>
								</div>
							      </li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	    <script src="../js/mui.min.js"></script>
        <script src="../js/mui.zoom.js"></script>
	    <script src="../js/mui.previewimage.js"></script>
	    <script src="../js/mui.pullToRefresh.js"></script>
	    <script src="../js/mui.pullToRefresh.material.js"></script>
		<script>
			mui.init();
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						mui.alert(1);
						$(pullRefreshEl).pullToRefresh({
						    alert(this.index)
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.insertBefore(creat//eFragment(ul, index, 10, true), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
							fragment.appendChild(li);
						}
						return fragment;
					};
				});
			})(mui);
		</script>
		<script type="text/javascript">
			mui.previewImage();
			mui.init();
            var menu1 = document.getElementById('menu-div-item1');
			var menu2 = document.getElementById('menu-div-item2');
			var menu3 = document.getElementById('menu-div-item3');
			var menu4 = document.getElementById('menu-div-item4');
			window.onload = function(){
				var viewwidth = document.body.clientWidth;
				var imgs = document.getElementsByClassName('imgcontent');
			    for(var i = 0;i < imgs.length;i++){
			    	if(imgs[i].getElementsByTagName('img').length >= 3){
			    		for (var j = 0 ;j < imgs[i].getElementsByTagName('img').length ; j++) {
			    			imgs[i].getElementsByTagName('img')[j].style.cssText = "width: 31%;height: viewwidth;" 
			    		}	
			        }
			    	if(imgs[i].getElementsByTagName('img').length == 1){
			    			imgs[i].getElementsByTagName('img')[0].style.cssText = "width: 95.5%;height: viewwidth;" 
			        }
			    	if(imgs[i].getElementsByTagName('img').length == 2){
			    		for (var j = 0 ;j < imgs[i].getElementsByTagName('img').length ; j++) {
			    			imgs[i].getElementsByTagName('img')[j].style.cssText = "width: 47%" 
			    		}	
			        }
			    }
//			    for (var i = 0; i < 3; i++) {
//							li = document.createElement();
//							li.className = 'mui-table-view-cell';
//							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
//							fragment.appendChild(li);
//						}
                menu1.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu2.style.cssText = "background-color: #FFFFFF;color: #3B559F";
				menu3.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu4.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";

		}
			menu1.addEventListener('tap',function(){
				menu1.style.cssText = "background-color: #FFFFFF;color: #3B559F";
				menu2.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu3.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu4.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
			})
			menu2.addEventListener('tap',function(){
				menu1.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu2.style.cssText = "background-color: #FFFFFF;color: #3B559F";
				menu3.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu4.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
			})
			menu3.addEventListener('tap',function(){
				menu1.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu2.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu3.style.cssText = "background-color: #FFFFFF;color: #3B559F";
				menu4.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
			})
			menu4.addEventListener('tap',function(){
				menu1.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu2.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu3.style.cssText = "background-color: #5A7CDB;color: #FFFFFF";
				menu4.style.cssText = "background-color: #FFFFFF;color: #3B559F";
			})
			
			

		var oglHeight = document.querySelector("body").offsetHeight;
		var windowSizeChange = function () {
		var tempHeight = document.querySelector("body").offsetHeight;
		var tabbarshow  = document.getElementById("tabbarshow")
	    if(tempHeight == oglHeight) {
	        tabbarshow.style.display = ""
	      } else {
	        tabbarshow.style.display = "none"
	      }
	    }
		</script>
	</body>

</html>